<template>
  <div class="wrapper">
    <div class="raid-info-area">
      <el-form size="mini" :label-width="formLabelWidth" inline>
        <el-form-item label="区域"><span class="underline">{{raid.zone}}</span></el-form-item>
        <el-form-item label="计分类别"><span class="underline">{{raid.scoreType}}</span></el-form-item>
        <el-form-item label="计分方式"><span class="underline">{{{'byItem':'按装备算分','byBoss':'按Boss算分'}[raid.mode]}}</span></el-form-item>
      </el-form>
      <el-form size="mini" :label-width="formLabelWidth" inline>
        <el-form-item label="开始时间"><span class="underline">{{raid.start}}</span></el-form-item>
        <el-form-item label="结束时间"><span class="underline">{{raid.end}}</span></el-form-item>
      </el-form>
      <div v-if="raid.mode=='byBoss'">
      </div>
      <div v-if="raid.mode=='byItem'">
      </div>
      <component :is="raid.mode=='byBoss'?'RaidDetailByBoss':'RaidDetailByItem'" :raid="raid"></component>
    </div>
  </div>
</template>

<script>
import { getRaidSource } from "../service/api";
import RaidDetailByBoss from "../components/RaidDetailByBoss"
import RaidDetailByItem from "../components/RaidDetailByItem"

export default {
  props: {
    raid: {
      required: true,
      type: Object
    }
  },
  components: {
    RaidDetailByBoss,
    RaidDetailByItem
  },
  data() {
    return {
      formLabelWidth: "100px"
    }
  }
}
</script>

<style lang="less" scoped>
.wrapper{
  height: 550px;
  overflow-y: auto;
}
.raid-info-area{
  padding: 5px 0;
  margin-top: 5px;
}
.underline{
  border-bottom: 1px solid gray;
  padding-bottom: 2px;
}
</style>
